<script lang="ts" setup>
import { TagsView } from "@/layout/components/TagsView";
import { Ref, watch, unref, computed, onMounted, ref } from "vue";
import { ResponseData, SshLinkInfoTree, SshSubMenu, subMenu } from "@/entity/entitys";
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
import { useTagsViewStore } from '@/store/modules/SshtagsView';
import xterm from './components/xterm.vue';
import connectEdit from './components/connectEdit.vue';
import connectAdd from './components/connectAdd.vue';
import { useI18n } from '@/hooks/web/useI18n'
import { getSshConnect } from "@/utils/sshUtil";
const tagsViewStore = useTagsViewStore();
const { t } = useI18n()
const menu_json = computed(() => {
  return tagsViewStore.getSshLinkInfoTree;
})
const address_ = computed(() => {
  return tagsViewStore.getActiveTag.address;
})
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const menu_item_click = (su: SshSubMenu) => {
  console.log(su.address);
  tagsViewStore.setTitle(su.address);
  console.log("Title: " + tagsViewStore.getTitle);
  tagsViewStore.addView(unref(su));
  tagsViewStore.setActiviteTag(su);
}
const getConnect = () => {
  if (tagsViewStore.getSshLinkInfoTree.length > 0) return;
  getSshConnect();



}
const handleChildEvent = (message:string) => {
  console.log('Received event from child:', message);
  
};
onMounted(() => {
  getConnect();
})
</script>
<template>
  <el-container class="layout-cborder__rightontainer">
    <el-aside width="150px" style="height: 100vh;">
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-sub-menu :index="index" v-for="(item_, index) in menu_json" :key="index">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>{{ item_.favorites_name }}</span>
          </template>
          <el-menu-item @click="menu_item_click(item_subMenu)" v-if="item_.subMenu.length > 0"
            :key="item_subMenu.address" v-for="item_subMenu in item_.subMenu" :index="item_subMenu.id">{{
              item_subMenu.name }}</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container class="main">
      <el-header class="el-cborder__rightontainer_">
        <TagsView  @child-tags-event="handleChildEvent" class="layout-border__top layout-border__bottom"></TagsView>
      </el-header>
      <el-main>
        <el-scrollbar style="height: 100%;">
          <div style="overflow-y:scroll;height: 100%; overflow-x: auto;scrollbar-width: none;-ms-overflow-style: none;">
            <connectEdit v-show="address_ == 'Edit'" />
            <xterm v-show="address_ != 'Edit' && address_ != 'Add' && address_ != ''" />
            <connectAdd v-show="address_ == 'Add'" />
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>
<style lang="scss" scoped>
.el-cborder__rightontainer_ {
  padding: 0px;
  box-shadow: inset 0 1px 20px rgba(200, 200, 200, 0.5);
  height: auto;
}

.layout-cborder__rightontainer {
  padding: 0px;
  box-shadow: inset 0 1px 20px rgba(200, 200, 200, 0.5);
  height: calc(100vh - 35px);
}

.main .el-main {
  padding: 0;
}

// .layout .el-aside {
//   color: var(--el-text-color-primary);
//   background: var(--el-color-primary-light-8);
// }</style>